<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>kubernetes-filebrowser</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .tree-icon{
            display: inline-block;
            width: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <el-select v-model="selectNamespace" @change="loadDeployments" placeholder="请选择">
            <el-option
                    v-for="namespace in namespaces"
                    :key="namespace"
                    :label="namespace"
                    :value="namespace">
            </el-option>
        </el-select>

        <el-select v-model="selectDeployment" @change="loadPods" placeholder="请选择">
            <el-option
                    v-for="deployment in deployments"
                    :key="deployment"
                    :label="deployment"
                    :value="deployment">
            </el-option>
        </el-select>

        <el-select v-model="selectPod" placeholder="请选择">
            <el-option
                    v-for="pod in pods"
                    :key="pod"
                    :label="pod"
                    :value="pod">
            </el-option>
        </el-select>
        <el-button @click="loadDirectorys('/')">浏览</el-button>

    </div>
    <div>
        <el-tree :data="directorys">
            <span slot-scope="{data}" class="customize-tree-p" @dblclick="loadDirectorys(data.path)" >
                <span class="tree-icon">
                    <i class="el-icon-folder-opened" v-if="data.directory"></i>
                </span>
                <span style="margin-left: 10px">{{ data.name }}</span>
                <el-button type="text" v-if="!data.directory" @click="download(data.path)">下载</el-button>
             </span>
        </el-tree>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    const GET_NAMESPACES_URL = "/kubernetes/namespaces";
    const GET_DEPLOYMENTS_URL = "/kubernetes/deployments";
    const GET_PODS_URL = "/kubernetes/pods";
    const GET_DIRECTORYS_URL = "/kubernetes/filebrowser";
    const DOWNLOAD_URL = "/kubernetes/download";

    var app = new Vue({
        el: '#app',
        data: {
            selectNamespace: '',
            namespaces: [],
            selectDeployment: '',
            deployments: [],
            selectPod: '',
            pods: [],
            directorys: [],
        },
        created() {
            this.loadNamespaces();
        },
        methods: {
            loadNamespaces() {
                axios.get(GET_NAMESPACES_URL).then(response => {
                    const data = response.data;
                    this.namespaces = data;
                });
            },
            loadDeployments() {
                axios.get(GET_DEPLOYMENTS_URL, {params: {namespace: this.selectNamespace}}).then(response => {
                    const data = response.data;
                    this.deployments = data;
                });
            },
            loadPods() {
                axios.get(GET_PODS_URL, {
                    params: {
                        namespace: this.selectNamespace,
                        deployment: this.selectDeployment
                    }
                }).then(response => {
                    const data = response.data;
                    this.pods = data;
                });
            },
            loadDirectorys(path){
                axios.get(GET_DIRECTORYS_URL, {
                    params: {
                        namespace: this.selectNamespace,
                        pod: this.selectPod,
                        path: path
                    }
                }).then(response=>{
                    const data = response.data;
                    this.directorys = data;
                });
            },
            download(filePath){
                let url = DOWNLOAD_URL + "?namespace=" + this.selectNamespace + "&pod=" + this.selectPod + "&filePath=" + filePath;
                window.open(url);
            },
        }
    })
</script>
</body>
</html>